<template>
  <div id="add" :style="styleA">
    编号：<input type="text" v-model="id" @keydown.enter="addBrand" />
    品牌名称：<input type="text" v-model="name" @keydown.enter="addBrand" />
    <input type="button" value="添加" :style="styleB" @click="addBrand" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      styleA: {
        border: "1px solid black",
        textAlign: "center",
        padding: "2px",
        backgroundColor: "skyblue",
        margin: "0px auto",
        fontWeight: "bold",
      },
      id: "",
      name: "",
      styleB: {
        margin: "0px 0px 0px 5px",
      },
    };
  },
  methods: {
    addBrand() {
      if (!this.id || !this.name) {
        alert("请输入完整品牌编号及品牌名称！！");
        return;
      }
      let newBrand = {
        id: this.id,
        name: this.name,
        date: new Date().toLocaleString(),
      };
      this.id = "";
      this.name = "";
      //分发事件
      this.$emit("add-brand", newBrand);
    },
  },
};
</script>

<style>
</style>